<template>
    <div class="contain">      
         <van-swipe :autoplay="3000" indicator-color="#f40" class="h-banner">
             <van-swipe-item v-for="(item, index) in bannerimages" :key="index">
                 <img v-lazy="item" />
              </van-swipe-item>
        </van-swipe>
        <div class="type-l" v-if="typeList">
            <div class="item" v-for="(cate,index) in typeList" :key="index">
                <img :src="cate.img" >
                <p>{{cate.mallCategoryName}}</p>
            </div>
        </div>
        <div class="tj-good">
             <div class="title">推荐商品</div>
             <div class="good">
                 <div class="item">
                      <img src=""/>
                      <p></p>
                 </div>
             </div>
        </div>
        <div class="hot-good">
               <div class="title">热卖商品</div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      bannerimages: [
        "http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175142_6947.jpg",
        "http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175111_9509.jpg"
      ],
      typeList: [
        {
          img:"http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408111959_2837.png",
          mallCategoryId: "1",
          mallCategoryName: "新鲜水果"
        },
        {
          img: "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408112010_4489.png",
          mallCategoryId: "1",
          mallCategoryName: "中外名酒"
        },
        {
          img: "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408113102_1595.png",
          mallCategoryId: "1",
          mallCategoryName: "营养奶品"
        },
        {
          img: "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408113048_1276.png",
          mallCategoryId: "1",
          mallCategoryName: "食品饮料"
        },
        {
          img:"http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408112053_8191.png",
          mallCategoryId: "1",
          mallCategoryName: "个人护理"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.contain{
    background: #f0f0f0;
}
.h-banner {
  height: 3rem;
  img {
    width: 100%;
  }
}
.type-l {
  width: 7rem;
  margin: 0 auto;
  display: flex;
  padding: .2rem 0;
  margin-top: .25rem;
  margin-bottom: .25rem;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  border-radius: .16rem;
  .item {
    width: 18%;
    overflow: hidden;
    img {
      width: 100%;
      overflow: hidden;
    }
    p {
      font-size: 0.26rem;
      color: #666;
    }
  }
}
.tj-good{
    width: 100%;
    overflow: hidden;
    background: #fff;
    .title{
        margin-top: .3rem;
        font-size: .32rem;
        color: #ffaa00;
        text-align: center;
        }
    .good{
         margin-top: .3rem;
         .item{
             width: 20%;
             overflow: hidden;
             img{
                 width: 100%;
                 overflow: hidden;
             }
             .price{
               font-size: .26rem;
               color: #666;
               text-align: center;  
             }
         } 

    }
}
</style>

